<!-- 视图层 -->
<template>
    <div class="box">
     <ul class="bb">
        <li v-for="(item,index) in (ll == 'navList1'?navList1 : navList2)" :key="index">
          <img :src="item.imgurl" alt="">
          <p>{{ item.title }}</p>
        </li>
        <div class="c">
          <div class="a" @click="aon"  ></div>
          <div class="b" @click="bon"></div>
        </div>
     </ul>
     <!-- <van-tabs v-model:active="active" scrollspy sticky>
     <van-tab v-for="(item,index) in navList" :key="index" :title="item.title">
        <img :src="item.imgurl " alt="">
      </van-tab>
</van-tabs> -->
      
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import {ref} from 'vue'
  
  let ll = ref('navList1')
  let navList1 = ref([
  { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
            { navid: 2, title: '数码电器', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png' },
            { navid: 3, title: '嗨购服饰', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png' },
            { navid: 4, title: '嗨购生鲜', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },
            { navid: 5, title: '嗨购到家', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png' },
            
  ])
  let navList2 =ref([
  { navid: 6, title: '充值缴费', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png' },
            { navid: 7, title: '9.9元拼', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png' },
            { navid: 8, title: '领券', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png' },
            { navid: 9, title: '领金贴', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png' },
            { navid: 10, title: 'plus会员', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' }
          
  ])
  let aon = ()=>{
    ll.value='navList1';
    
  }
  let bon = ()=>{
    ll.value='navList2'
  }
  </script>
  
  
  <!-- 样式层 -->
  <style scoped>
  .box{
    height: 120px;
  
    background-color: brown;
  }
  .bb{
    height: 94px;
    width: 350px;
    margin-top: 12px;
    margin-left: 10px;
    position: relative;
   background-color: aliceblue;
   display: flex;
   justify-content: space-evenly;
   overflow-x: scroll;
   border-radius: 15px;
  }
  .bb>li{
    width: 75px;
    height: 60px;
    text-align: center;
    margin-top: 13px;
    
    
  }
  .bb img{
    width: 33px;
    text-align: center;
  }
  .a{
    width: 30px;
    height: 5px;
    background-color: red;
 
  
  }
  .b{
    width: 30px;
    height: 5px;
    background-color: rebeccapurple;
    /* display: inline-block; */

  
  }
  .c{
    display: flex;
    position: absolute;
    top: 90%;
  }
  .van-grid{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  </style>
  